<script setup>
import { reactive } from "vue";
import { showToast } from 'vant';
import { useI18n } from "vue-i18n"
import { useRouter } from "vue-router"
import Header from "@/components/Header.vue"
import { updatePassword } from "@/api"
const { t } = useI18n();
const router = useRouter();
const state = reactive({
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
    loading: false
})
const sure = () => {
    if (state.oldPassword == '' || state.newPassword == '' || state.confirmPassword == '') {
        showToast(t('Cannot be blank'));
        return
    }
    if (state.confirmPassword != state.newPassword) {
        showToast(t('Inconsistent password'));
        return
    }
    state.loading = true;
    updatePassword({
        oldPassword: state.oldPassword,
        newPassword: state.newPassword,
    }).then(() => {
        showToast(t('Successful operation'));
        localStorage.removeItem('token');
        router.push('/login')
    }).catch(err => {
        showToast(err.msg);
    }).finally(() => {
        state.loading = false;
    })
}

</script>
<style scoped>
.text-font-size {
    font-size: 0.4rem;
}
</style>
<template>
    <Header :title="$t('Manage Login Password')"></Header>
    <div class="px-2 py-2">
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Old Password') }}</span>
            </div>
            <input type="text" v-model="state.oldPassword"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('New Password') }}</span>
            </div>
            <input type="text" v-model="state.newPassword"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Confirm New Password') }}</span>
            </div>
            <input type="text" v-model="state.confirmPassword"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <div class="pt-4" @click="sure">
            <button class="btn btn-primary btn-xs w-full text-font-size" :disabled="state.loading">
                {{ $t('Confirm to change') }}
            </button>
        </div>
        <div class="p-2 italic">
            {{ $t('Please remember your fund password, and contact customer service if you forget')
            }}
        </div>
    </div>
</template>
